<template>
    <div class="content">
        <div :style="contentStyle"></div>
        <div class="bgContent">
            <div class="finish-box" :style="bgStyle" v-show="isFinished">
                <div class="finish-img"></div>
            </div>
            <div class="container-box"
                 v-for="(groupItem,index) in articleGroup"
                 :key="index"
                 :style="articleBgStyle(index)">
                <div class="option" v-show="!isFinished"
                     :style="optionStyle(index)">
                </div>
                <v-touch v-for="(article,subIndex) in articleGroup[index]"
                     :key="subIndex"
                     :class="articleClassName(article,index)"
                     :style="articleStyle(article,index,subIndex)"
                     @tap="articleTouch(article,index,$event)">
<!--                 <Point class="pointTouch" v-if="!item.operated"/>-->
                </v-touch>
            </div>
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    import {mapActions} from "vuex";
    // import Point from "../point.vue"
    // eslint-disable-next-line no-unused-vars
    const $ = window.$
    export default {
        mixins: [mixins],
        data() {
            return {
                isFinished: false,
                articleCount: 0
            }
        },
        beforeMount() {
            if (this.item.isFinish) {
                this.isFinished = true
                return
            } else {
                this.onEnter()
            }

        },
        // components:{
        //     Point
        // },
        computed: {
            //分组
            articleGroup() {
                let index = 0
                const arrGroup = []
                while (index < this.item.articles.length) {
                    arrGroup.push(this.item.articles.slice(index, index += 2))
                }
                return arrGroup
            },
            articleClassName(article, index) {
                return function (article, index) {
                    const classNames = ['article-options']
                    this.articleGroup[index].map(item => {
                        if (!article.isTouch && item.isHidden) classNames.push('article-hidden')
                    })
                    if (article.isTouch) classNames.push('article-active')
                    if(this.isFinished) classNames.push('finish-article')
                    return classNames
                }
            },
            //背景图片样式
            contentStyle() {
                return {
                    height: '100%',
                    width: '100%',
                    background: "url(" + this.item.background + ")0 0/100% 100%",
                    filter: this.isFinished ? 'none' : 'grayscale(1)',
                    transition: "all 2s"
                }
            },
            // 透明图片样式
            articleBgStyle(index) {
                return function (index) {
                    const back = "url(" + this.variable.STATICE_URLTITLE + 'assignment/image/page12/半透背景.png' + ")0 0/100% 100%"
                    return {
                        background: this.isFinished? '' : back,
                        left: this.isFinished ? '0rem' : 0 + index * 20 + 'rem',
                        transform: this.isFinished ? 'translateX(10rem)' : '',
                        transition: 'all 1s'
                    }
                }
            },
            bgStyle(){
              return{
                  background: "url(" + this.variable.STATICE_URLTITLE + 'assignment/image/page12/半透背景.png' + ")0 0/100% 100%"
              }
            },
            //AB选择样式
            optionStyle() {
                return function (index) {
                    return {
                        background: index == 0 ? "url(" + this.variable.STATICE_URLTITLE + 'assignment/image/page12/A.png' + ")center center/contain no-repeat"
                            : "url(" + this.variable.STATICE_URLTITLE + 'assignment/image/page12/B.png' + ")center center/contain no-repeat",
                    }
                }
            },
            // 角色样式
            articleStyle(article, index, subIndex) {
                return function (article, index, subIndex) {
                    return {
                        left: this.isFinished ? 4 + index * 8 + 'rem' : 4 + subIndex * 8 + 'rem',
                        background: this.isFinished ? article.isMatched ? 'url(' + article.imageUrl + ')center center / contain no-repeat' :''
                        : 'url(' + article.imageUrl + ')center center / contain no-repeat',
                        filter: 'drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)',
                        transition: 'all 1s'
                    }
                }
            }
        },
        methods: {
            onEnter:function(){
                this.item.operated = false
                this.item.articles.forEach(item => {
                    this.$set(item,'isTouch',false)
                    this.$set(item,'isHidden',false)
                })
            },
                articleTouch: function (article, index, event) {
                    if (this.item.isFinish || article.isTouch) {
                        return
                    }
                    this.$set(article, 'isTouch', true)
                    this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                    this.articleGroup[index].map(item => {
                        const isSelect = JSON.stringify(item) !== JSON.stringify(article)
                        if (isSelect) {
                            this.$set(item, 'isHidden', true)
                            this.$set(item, 'isTouch', false)
                        }
                    })

                    let activeCount = 0
                    this.articleGroup.map(subGroup => {
                        subGroup.map(item => {
                            if (item.isTouch && item.isMatched) activeCount++
                            })
                    })
                    const metchArr = this.item.articles.filter(item=>{return item.isMatched})
                    const isTouchArr = this.item.articles.filter(item=>{return item.isTouch})
                    if(isTouchArr.length === this.articleGroup.length){
                        console.log(activeCount , metchArr.length);
                        if (activeCount === metchArr.length) {
                            if(this.isSeedEntery){
                                this.isFinished = true
                                setTimeout(()=>{
                                    this.setSucLottiePlay() },800)
                            }else {
                                this.isFinished = true
                                setTimeout(()=>{
                                    this.perfectMusic()  },800)
                            }
                            setTimeout(()=>{
                                this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                                this.addAnswer({
                                    id: this.item.id,
                                    type: true
                                })
                            },3000)

                        } else {
                            if(this.isSeedEntery){
                                setTimeout(()=>{this.$emit('nextAssignment')},600)
                            } else {
                                this.$emit("losShow")
                            }
                        }
                    }

                },
                ...mapActions("mainStatus", ["setLoading"])
            },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.item.isFinish) this.onEnter()
            }
        }
        }
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.bgContent
    position absolute
    $center('WHLT',36rem,8rem)
    @keyframes fadeIn
        0%
            opacity 0
        50%
            opacity 0.1
        100%
            opacity 1
    .finish-box
        position absolute
        $center('WHLT',16rem,8rem)
        opacity 0
        animation loading-in .8s
        animation-fill-mode forwards
        .finish-img
            position absolute
            $center('WHLT',10rem,3rem)
            top 9.5rem
            background url($urlTitle + "assignment/image/page12/完成.png") center center/90% no-repeat
    .container-box
        position absolute
        top 0
        height 8rem
        width 16rem
        line-height 8rem
        .option
            position absolute
            $coord('WHLB',2.5rem,2.5rem,0,-4rem)
            margin-left 6.5rem
        .article-options
            position absolute
            $center('WHLT', 4rem, 4rem)
        .article-hidden
            transform scale(0.8)
        .article-active
            filter none
            transform scale(1.5)
        @keyframes mysacle
            0%
                opacity 0
                transform scale(0)
            50%
                opacity 0
                transform scale(0)
            60%
                opacity 0.2
                transform scale(0.3)
            100%
                opacity 1
                transform scale(1.2)
        .finish-article
            opacity 0
            animation mysacle 0.8s
            animation-fill-mode forwards
</style>
